<template>
  <div class="FlavorDialog">
    <el-dialog v-model="centerDialogVisible" :title="currentDish.name" width="80%" center align-center :show-close="false"
      @close="dialogClose" style="border-radius: 10px;">
      <div>
        <div class="flavorBox" v-for="item in currentDish.flavors" :key="item.id" style="margin-bottom: 10px;">
          <div class="flavorName">{{ item.name }}</div>
          <div class="flavorValue" style="display: flex; flex-wrap: wrap;">
            <el-checkbox-group v-model="checkboxGroup" size="default">
              <el-checkbox-button v-for="citem in JSON.parse(item.value)" :key="citem" :label="citem">
                {{ citem }}
              </el-checkbox-button>
            </el-checkbox-group>
            <!-- <el-checkbox-button color="#ffd64d" plain v-for="citem in JSON.parse(item.value)" :key="citem" size="small"
              style="margin: 3px 3px; color: black;">{{ citem }}</el-checkbox-button> -->
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer"
          style="width: 100%; display: flex; align-items: center; justify-content: space-between;">
          <span style="font-weight: 700; color: red;"> ￥ {{ currentDish.price }}</span>
          <el-button color="#ffd64d" type="primary" size="small" @click="add">
            加入购物车
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="FlavorDialog">
import { defineProps, defineEmits, toRefs, ref } from 'vue';
import { Idish, ISetmeal, IShoppingCart } from '../interface/index'

const props = defineProps<{
  centerDialogVisible: boolean,
  currentDish: Idish | ISetmeal
}>()

const emit = defineEmits<{ (e: 'update:centerDialogVisible', value: boolean): void, (e: 'update:currentDish', value: Idish): void, (e: 'addCar', value: IShoppingCart): void }>()

const { centerDialogVisible, currentDish } = toRefs(props)

const dialogClose = () => {
  emit('update:centerDialogVisible', false)
}

const checkboxGroup = ref()

const add = () => {
  const params :IShoppingCart ={
    name: currentDish.value.name,
    image: currentDish.value.image,
    dishId: currentDish.value.id,
    dishFlavor: JSON.stringify(checkboxGroup.value) ,
    amount: currentDish.value.price,
  }
  emit('addCar', params)
}
</script>

<style scoped lang="scss">
// ::v-deep .el-checkbox-button,.is-checked {
//   .el-checkbox-button__inner {
//     background-color: red;
//   }
// }
::v-deep .el-checkbox-button.is-checked {
  background-color: #ffd64d;

  .el-checkbox-button__inner {
    background-color: #ffd64d;
    color: black;
  }
}

::v-deep .el-checkbox-button.is-focus .el-checkbox-button__inner {
  border-color: #ffd64d;
}

::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner {
  border-color: #ffe282;
}

::v-deep .el-checkbox-button__inner:hover {
  color: black;
}

// ::v-deep .el-checkbox-button,
// .is-checked .el-checkbox-button__inner {
//   background-color: red;
// }
</style>